<template>
  <div class="layout-pd" style="background-color: #ffffff;margin-top:10px ;">
    <el-page-header @back="goBack" title="返回" content="流程模型设计" style="padding-bottom:10px">
      <template #content>
        <div class="flex items-center">
          <span class="text-large font-600 " style="padding-right:5px">流程模型设计</span>
          <SvgIcon name="basefont icon-title" />
          <span class="text-sm " style="color: var(--el-text-color-regular)">
             {{state.workflowModelTitle+'('+state.workflowModelVersion+')'}}
          </span>
        </div>
      </template>
      <template #extra>
        <div class="flex items-center" style="margin-top:5px;margin-right:20px">
          <el-button icon="ele-Refresh" @click="getModelInfo">重置</el-button>
          <el-button type="primary" icon="ele-CircleCheck" @click="save">保存</el-button>
        </div>
      </template>
    </el-page-header>
    <div class="designer-wrap">
      <div class="designer-content-box" :style="{ height: props.readable ? '100vh' : 'calc(100vh - 50px)' }">
      <div class="flow-design-wrap">
        <div id="flow-design" class="flow-design-container" :style="zoomStyle">
          <div id="flow-design-content" class="flow-design-content">
            <FlowStartNode :node="nodeData" />
            <FlowNode :node="nodeData" :readable="state.readable" />
            <FlowEndNode :node="nodeData" :readable="props.readable" />
          </div>
        </div>
        <FlowZoom v-model="state.zoomValue" />
      </div>
    </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="FlowDesign">
  import { ElMessage } from 'element-plus';
  import { getStartNode } from '@/utils/nodeUtil';
  import FlowStartNode from '../components/flowNode/start/index.vue';
  import FlowEndNode from '../components/flowNode/end/index.vue';
  import FlowZoom from '../components/common/FlowZoom.vue';
  import FlowNode from '../components/flowNode/index.vue';
//------------------接收传入参数(组件)-------------------
  const props = defineProps({
    navable: {
      type: Boolean,
      default: true,
    },
    readable: {
      type: Boolean,
      default: false,
    },
  });
  const route = useRoute();
  //---------------内部变量定义----------------------------------
  const state=reactive({
    zoomValue: 100,
    workflowModelId:null,
    workflowModelTitle:"请新选择模型再进行设计",
    workflowModelVersion:"1.0",
  });
  const zoomStyle = computed(() => {
    let zoom=state.zoomValue / 100;
			return {zoom: zoom}
	});
  const nodeData = ref()
  watch(
    () => $store.flow.node,
    (val: any) => {
      console.log(11)
      nodeData.value=val
    },
    {
      deep: true,
    }
  );
  //------------------内部方法定义--------------------------------------
  const goBack = () => {
    // 1、关闭当前 tagsView
    closeCurrentTagsView()
  }
  const closeCurrentTagsView = () => {
    const params = { contextMenuClickId: 1, ...route };
    mittBus.emit("onCurrentContextmenuClick", Object.assign({}, params));
  };
  const getModelInfo=()=>{
    let params={workflowModelId:state.workflowModelId}
    $api.common.send.post('workflowModel0002',params).then((res)=>{
      let result=res.result;
      if(result){
        if(result.workflowModelJson.hasOwnProperty('id')){
          nodeData.value=result.workflowModelJson
        }
        state.workflowModelTitle=result.workflowModelTitle
        state.workflowModelVersion=result.workflowModelVersion
      }
    });
  }
  const save=()=>{
    //保存设计信息
    let params={workflowModelId:state.workflowModelId,workflowModelJson:nodeData.value}
    $api.common.send.post('workflowModel0007',params).then(()=>{
      ElMessage.success('保存成功');
    });
  }
  // 页面加载时
  onMounted(() => {
    //初始化节点信息
    $store.flow.SET_NODE(getStartNode())
    state.workflowModelId=route.query.workflowModelId
    getModelInfo()
  });
</script>
<style lang="scss">

</style>
